<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body
	style="margin: 0px; background: none repeat scroll 0% 0% rgb(0, 0, 0); overflow: hidden;">

	<canvas id="c" width="1280" height="900"></canvas>
	<script>
		var b = document.body;
		var c = document.getElementsByTagName('canvas')[0];
		var a = c.getContext('2d');
		document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218
	</script>
	<script>
		// start of printing code //
		// Hello,boys and girls
		// all shape you will see can drew by the blew code 

		S = b.querySelectorAll("script")[1].innerHTML.split("\n");

		so = 0;
		fs = "fillStyle";
		lo = 1;
		ln = "length";

		c.width = W = innerWidth;
		c.height = H = S.length * 20;

		b.style.margin = 0;
		b.style.background = "#000";
		b.style.overflow = "hidden";

		a.textBaseline = "top";
		a.font = "12px monospace";

		x = setInterval(function() {
			a.globalCompositeOperation = "source-over";
			a.shadowBlur = 0;
			a[fs] = "rgba(0,0,0,0.4)";
			a.fillRect(0, 0, W, H);

			a.shadowColor = "rgba(0,255,0,0.5)";
			a.shadowBlur = 10;
			a[fs] = "#060";
			a.globalCompositeOperation = "lighter";

			S.forEach(function(v, i) {
				if (i <= lo) {
					if (i == lo) {
						v = v.substr(0, so);
					}
					a.fillText(v, 30, 100 + i * 16);
				}
			});

			a[fs] = "#0f0";
			a.fillRect(30 + a.measureText(S[lo].substr(0, so)).width,
					102 + lo * 16, 10, 14);
			so++;

			if (so >= S[lo][ln]) {
				lo++;
				so = 0;
			}
			if (lo * 16 > innerHeight - 200) {
				a.translate(0, -0.5);
			}
			if (lo >= S[ln] - 1) {
				window.clearInterval(x);
			}
		}, 25);
		// Thanks for your attention!
		// Best wishes to you! Happy your day!
		// 2014.3.7 
	</script>
	<script >
	good moring;
	hello;
	</script>

</body>
</html>